<template>
  <div class="personalCenter">
    <el-container>
      <!-- <el-header>个人中心</el-header> -->
      <el-container style="overflow-y: hidden; overflow-x: hidden">
        <el-aside width="400px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar :size="100" :src="circleUrl" align="center"></el-avatar>
              </div>
              <div
                class="block"
                style="
                  width: 100px;
                  display: flex;
                  justify-content: flex-start;
                  margin-left: 17px;
                  font-weight: bold;
                "
              >
                <span>{{ user.userNickName }}</span>
              </div>
            </div>
          </el-col>
          <el-input
            v-model="user.userId"
            type="text"
            placeholder="用户ID"
            maxlength="6"
            show-word-limit
            disabled
          ></el-input>
          <el-input
            v-model="user.userNickName"
            type="text"
            placeholder="用户昵称"
            show-word-limit
          ></el-input>
          <el-input
            v-model="user.userName"
            type="text"
            placeholder="用户姓名"
            show-word-limit
            disabled
          ></el-input>
          <el-input
            v-model="user.email"
            type="text"
            placeholder="邮箱"
            show-word-limit
          ></el-input>
          <el-button-group style="float: right; padding: 3px 0" type="text">
            <el-button type="primary" size="medium" @click="submit" round>保存</el-button>
          </el-button-group>
        </el-aside>
        <el-container>
          <el-main>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span style="float: left"><b>个人说明</b></span>
                <el-button-group style="float: right; padding: 3px 0" type="text">
                  <el-button type="primary" size="medium" @click="editPwd" round
                    >修改密码</el-button
                  >
                </el-button-group>
              </div>
              <span
                >{{ user.remarks }}
                道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。
                故常无欲，以观其妙，常有欲，以观其徼。
                此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
              </span>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>

    <el-dialog
      title="重置密码"
      :visible.sync="forgetDialogVisible"
      width="30%"
      center
      :show-close="false"
    >
      <el-form>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-user"
            v-model="pwdAndUserObj.userName"
            placeholder="账号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="pwdAndUserObj.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="pwdAndUserObj.newpassword"
            placeholder="确定密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="resetPass" style="width: 100%"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
export default {
  name: "Personal",
  data() {
    return {
      user: {},
      pwdAndUserObj: {
        userName: "",
        password: "",
        newpassword: "",
      },
      forgetDialogVisible: false,
      text: "",
      circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      sizeList: ["large"],
      tableData: [
        {
          date: "2016-05-03",
          name1: "Wechat",
          name2: "Github",
        },
      ],
    };
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user_name"));
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      let that = this;
      that
        .$axios({
          url: "http://localhost:9002/user/detail",
          method: "post",
          data: qs.stringify({
            userId: that.user.userId,
          }),
        })
        .then(function (response) {
          console.log(response);
          that.user = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    editPwd() {
      this.pwdAndUserObj.userName = this.user.userName;
      this.forgetDialogVisible = !this.forgetDialogVisible;
    },
    resetPass() {
      let that = this;
      if (that.pwdAndUserObj.password != that.pwdAndUserObj.newpassword) {
        this.$message({
          message: "密码不一致，请重新输入!",
          type: "warning",
        });
        that.pwdAndUserObj.password = "";
        that.pwdAndUserObj.newpassword = "";
        return false;
      }
      that
        .$axios({
          url: "http://localhost:9002/user/editPwd",
          method: "post",
          data: qs.stringify({
            userName: that.pwdAndUserObj.userName,
            userPassword: that.pwdAndUserObj.password,
          }),
        })
        .then(function (response) {
          console.log(response);
          that.forgetDialogVisible = !that.forgetDialogVisible;
          that.user = response.data.data;
          that.$message({
            type: "success",
            message: "修改成功",
          });
          //密码修改成功，退出重新登陆
          setTimeout(() => {
            that.clearLocalStorage();
          }, 2000);
        })
        .catch(function (error) {
          that.pwdAndUserObj.password = "";
          that.pwdAndUserObj.newpassword = "";
          console.log(error);
          that.$message.error("修改失败");
        });
    },
    submit() {
      let that = this;
      that.$axios
        .post(`http://localhost:9002/user/edit`, {
          userId: that.user.userId,
          userName: that.user.userName,
          userNickName: that.user.userNickName,
          email: that.user.email,
        })
        .then(function (res) {
          console.log(res);
          that.$message({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            type: "info",
            message: "修改失败",
          });
        });
    },
    clearLocalStorage() {
      let that = this;
      that.$axios
        .post(`http://localhost:9002/user/exit`, {
          userName: that.pwdAndUserObj.userName,
          userPassword: that.pwdAndUserObj.password,
        })
        .then(function (res) {
          console.log(res);
          that.pwdAndUserObj.password = "";
          that.pwdAndUserObj.newpassword = "";
          that.$message({
            type: "success",
            message: "退出成功！",
          });
          localStorage.clear();
          that.$router.push({ path: "/login" });
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            type: "info",
            message: "修改失败",
          });
        });
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style scoped lang="scss">
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
}
.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: "center";
  margin-top: 30px;
  margin-left: 150px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  border-radius: 30px;
}
</style>
